Jassif Team Institution

CSS Box Shadow

CSS box-shadow சொத்து ஒன்று அல்லது அதற்கு மேற்பட்ட நிழல்களை ஒரு உறுப்பிற்குப் பயன்படுத்தப் பயன்படுகிறது.

இதன் எளிமையான பயன்பாட்டில், நிழலின் கிடைமட்ட மற்றும் செங்குத்து ஆஃப்செட்டை மட்டுமே குறிப்பிடலாம்.

கூடுதலாக, நீங்கள் ஒரு நிற நிழலை, ஒரு பரவல் ஆரம், ஒரு தெளிவின்மை விளைவு சேர்க்கலாம் மற்றும் வெளிப்புற நிழலிலிருந்து உள்ளீட்டு நிழலாக மாற்றலாம் (inset).

CSS box-shadow Property

CSS box-shadow சொத்து ஒன்று அல்லது அதற்கு மேற்பட்ட நிழல்களை ஒரு உறுப்பிற்குப் பயன்படுத்தப் பயன்படுகிறது.

CSS Horizontal and Vertical Shadow

இதன் எளிமையான பயன்பாட்டில், நிழலின் கிடைமட்ட மற்றும் செங்குத்து ஆஃப்செட்டை மட்டுமே குறிப்பிடலாம்.

எடுத்துக்காட்டு

கிடைமட்ட மற்றும் செங்குத்து நிழலைக் குறிப்பிடவும்:

div {
  box-shadow: 10px 10px;
}

Specify a Color for the Shadow

color அளவுரு நிழலின் நிறத்தை வரையறுக்கிறது.

எடுத்துக்காட்டு

நிழலுக்கு ஒரு நிறத்தைக் குறிப்பிடவும்:

div {
  box-shadow: 10px 10px lightblue;
}

Add a Blur Effect to the Shadow

blur அளவுரு நிழலின் தெளிவின்மை ஆரத்தை வரையறுக்கிறது. எண் அதிகமாக இருந்தால், நிழல் அதிகமாக மங்கலாக இருக்கும்.

எடுத்துக்காட்டு

நிழலுக்கு தெளிவின்மை விளைவைச் சேர்க்கவும்:

div {
  box-shadow: 10px 10px 5px lightblue;
}

Set the Spread Radius of the Shadow

spread அளவுரு நிழலின் பரவல் ஆரத்தை வரையறுக்கிறது.

ஒரு நேர்மறை மதிப்பு நிழலின் அளவை அதிகரிக்கிறது, மற்றும் ஒரு எதிர்மறை மதிப்பு நிழலின் அளவை குறைக்கிறது.

எடுத்துக்காட்டு

நிழலின் பரவல் ஆரத்தை அமைக்கவும்:

div {
  box-shadow: 10px 10px 5px 12px lightblue;
}

Set the inset Parameter

inset அளவுரு நிழலை வெளிப்புற நிழலிலிருந்து (outset) உள்ளீட்டு நிழலாக மாற்றுகிறது (உறுப்பு சட்டகத்தின் உள்ளே).

எடுத்துக்காட்டு

inset அளவுருவைச் சேர்க்கவும்:

div {
  box-shadow: 10px 10px 5px lightblue inset;
}

Add Multiple Shadows

ஒரு உறுப்பு பல நிழல்களையும் கொண்டிருக்கலாம்.

ஒரு உறுப்பிற்கு ஒன்றுக்கு மேற்பட்ட நிழல்களை இணைக்க, நிழல்களின் காற்புள்ளி பிரிக்கப்பட்ட பட்டியலைச் சேர்க்கவும்.

எடுத்துக்காட்டு

div {
  box-shadow: 5px 5px 8px blue, 
              10px 10px 8px red, 
              15px 15px 8px green;
}

Creating Shadow Cards

நீங்கள் காகிதம் போன்ற அட்டைகளை உருவாக்க box-shadow சொத்தையும் பயன்படுத்தலாம்:

எடுத்துக்காட்டு

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
              0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Exercise

box-shadow சொத்தில் "spread" அளவுரு என்ன செய்கிறது?

CSS Shadow Properties

பின்வரும் அட்டவணை CSS நிழல் சொத்துக்களை பட்டியலிடுகிறது: